<template>
  <div class="hosting">
    <hunk-head customEvent="true" @headFn="gobanck" name="房屋托管"></hunk-head>
    <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#FFAA58"></uni-segmented-control>
    <div v-if="current===1" class="checkAll" >
      <div class="cccc" >
        <radio :checked="checkall" color="#FFAA58" @click="checkedAll"/>
        全选
      </div>
      <!-- <button v-if="isshow && current==1" style="border:0" class="shareAll" open-type="share">
        {{hosttext}}
      </button> -->
      <!-- v-else-if="!isshow&&current==1" -->
      <div  class="shareAll" @click="clickhost(hosttext)">{{hosttext}}</div>
    </div>
    <div v-if="current!=2" class="hunk">
      <div class="search">
        <img v-if="baseUrl" :src="baseUrl+'search.png'" >
        <input type="text" placeholder="请输入地址、门牌号" @input="searchInput">
      </div>
      <div class="type-list">
        <div class="type-item">
          <div class="item-lable">房屋状态</div>
          <div class="item">
            <span v-for="(item,index) in housetypeList" :key="index" :class="item.color" @click="clickBtn(item,1)">
              {{item.text}}
              <img v-if="item.ischeck" :src="baseUrl+'check.png'" >
            </span>
          </div>
        </div>
        <div class="newItem">
          <div class="type-item">
          <div class="item-lable">整租/合租</div>
          <div class="item">
            <span v-for="(item,index) in outtypeList" :key="index" :class="item.color" @click="clickBtn(item,2)">
              {{item.text}}
              <img v-if="item.ischeck" :src="baseUrl+'check.png'" >
            </span>
            <span v-for="(item,index) in houseattributeList" :key="index" :class="item.color" @click="clickBtn(item,3)">
              {{item.text}}
              <img v-if="item.ischeck" :src="baseUrl+'check.png'" >
            </span>
          </div>
        </div>
        <div class="type-item">
          <div class="item-lable">房屋属性</div>
          <div class="item">
            <span v-for="(item,index) in houseattributeList" :key="index" :class="item.color" @click="clickBtn(item,3)">
              {{item.text}}
              <img v-if="item.ischeck" :src="baseUrl+'check.png'" >
            </span>
          </div>
        </div>
        </div>
        
      </div>
      <scroll-view
        class="home-list"
        scroll-y="true"
        :refresher-enabled="refresherEnabled"
        :refresher-triggered="triggered"
        @refresherrefresh="onRefresh"
        @refresherrestore="triggered = false"
        @refresherabort="triggered = false"
        @scrolltolower="_onLoadmore"
      >
        <div class="home-item" v-for="(item1, idx) in houseList" :key="idx">
          <div class="toppp">
            <div class="home-name">{{item1.address}}</div>
            <div class="cccc" v-if="current===1">
              <radio :checked="item1.checked"  color="#FFAA58" @click="checkItemAll(idx)"/>
              全选
            </div>
          </div>
          <div class="item-list">
            <div v-for="(item, index) in item1.houseLists" :key="index" :class="['one', check(item) ? (item.tag == 0 ? typeList[0].bgcolor : typeList[1].bgcolor) : typeList[2].bgcolor]">
              <div class="cc" v-if="current===1">
                <radio :checked="item.checked" color="#FFAA58" @click="checkItme(idx,index)"/>
              </div>
              <div class="top" style="width:60px">
                <img v-if="isImge(item)" :src="isImge(item) == 1 ? typeList[1].img : typeList[0].img " />
              </div>
              <div class="miaoshu">{{outtypeList[item.outtype].text}}-{{item.roomno}}</div>
              <div class="yuezu">
                <span>{{item.showlowrent}}</span>
                /月
              </div>
              <div class="tuoguanduixiang" v-if="!current">
               
                <!-- <div class="name">{{item.deptname}}</div> -->
                 托管对象:{{cheangeDep(item.deptname)}}
              </div>
              <div :class="['type', check(item) ? (item.hostingflag ? 'type2' : 'type1') : 'type3']">
                <img :src="check(item) == 1 ? (item.hostingflag ? typeList[1].type : typeList[0].type) : typeList[2].type" alt="" srcset="">
              </div>
            </div>
          </div>
        </div>
        <div v-if="isnone < 1" class="none">
          <img v-if="baseUrl" :src="baseUrl+'imgs/imgs/none.png'" alt="">
        </div>
      </scroll-view>
    </div>
    <div v-if="current===2">
        <div class="tght" v-for="(i,index) in thirdList" :key="index">
          <div class="inner"  @click="jumpTo(i)">
            <div class="left">
              <img  v-if="baseUrl" :src="baseUrl+'/twoicon/hetongliebiao.png'" >
            </div>
            <div class="right">
              <div>业主名称：{{i.unickname}}</div>
              <div class="iner-c"><div class="label">公寓名称：</div> <div class="content">{{i.deptname}}</div> </div>
              <div>涉及房源数量：{{i.housecount}}</div>
              <div>托管结束时间：{{i.trusteeshipendtime?i.trusteeshipendtime:'长期'}}</div>
              <div>托管费率：{{i.rate}}%</div>
            </div>
          </div>
          <div class="contract">
            {{i.orderno}}
          </div>
        </div>
    </div>
    
  </div>
</template>

<script>
const imgUrl = `${process.env.VUE_APP_BASE_IMG_URL}`
import Head from '@componentsMine/head'
const zichi = imgUrl+'house/zichi.png'
const tuoguan = imgUrl+'house/tuoguan.png'
const nodoor = imgUrl+'house/nodoor.png'
const zydq = imgUrl+'house/zydq.png'
const jjjz = imgUrl+'house/jjjz.png'
import { getHouseYzModelList, canceltrusteeship } from '@/apis/host'
import { createQRCode } from '@/apis/public'
import {getMyTrusteeshipcontractList} from '@/apis/trusteeship'
export default {
  components: {
    'hunk-head': Head
  },
  data() {
    return {
      refresherEnabled: true,
      triggered:false,
      checkall: false,
      current:0,
      items: [ '已托管', '未托管', '托管合同' ],
      hosttext: '解除选中的托管',
      typeList: [
        { type: zichi, img: jjjz, bgcolor: 'zc'},
        { type: tuoguan, img: zydq, bgcolor: 'tg'},
        { type: nodoor, img: '', bgcolor: 'wbdm'}
      ],
      housetypeList: [
        { id: 0,text: '空置', color: 'kong', ischeck:false},
        { id: 1,text: '已租', color: 'yizu', ischeck:false},
        { id: 2,text: '欠租', color: 'red', ischeck:false},
        { id: 3,text: '接近交租', color: 'jjjz', ischeck:false},
        { id: 4,text: '租约快结束', color: 'zykjs', ischeck:false},
        { id: 5,text: '未绑定门锁', color: 'wbdms', ischeck:false},
      ],
      outtypeList: [
        { id: 0,text: '合租', color: 'zc', ischeck:false},
        { id: 1,text: '整租', color: 'zc', ischeck:false},
      ],
      houseattributeList: [
        { id: 0,text: '自持', color: 'zc', ischeck:false},
        { id: 1,text: '托管', color: 'zc', ischeck:false},
      ],
      houseList:[
      ],
      housetype:[],
      outtype:[],
      houseattribute:[],
      isflag: true,
      timer:null,
      addresslike:'',
      shareImg:'',
      isshow:false,
      thirdList:[]
    }
  },
  watch:{
    current(val,ol){
      this.hosttext = val ? '托管已选中房源': '解除选中的托管'
    }
  },
  created(){
    this.getHouseYzModelList()
    this.createQRCode()
    this.getTrust()
  },
  computed: {
    userid(){
      return this.$store.state.baseStore.userInfo.userid
    },
    userInfo(){
      return this.$store.state.baseStore.userInfo
    },
    baseUrl() {
      return process.env.VUE_APP_BASE_IMG_URL;
    },
    isnone(){
      if(this.houseList){
        return this.houseList.length
       }else{
         return false
       }
    },
    // isshow(){
    //   let arr = false
      
    //   return arr
    // }
  },
  onShareAppMessage(res) {
    if (res.from === 'button') {
      console.log('点击分享',res.target)
    }
    let list = []
    this.houseList.forEach(element => {
      element.houseLists.forEach((item,idx)=>{
          if(item.checked){
            list.push(item.houseroomid)
          }
        })
    })
    let data = {
      houseLit: list
      // name: this.userInfo.unickname
    }
    console.log('分享数据',JSON.stringify(data))
    return {
      title: this.userInfo.unickname+'邀请您确认托管！',
      imageUrl: this.shareImg,
      path: '/subPackage/link/tuoguan?query='+JSON.stringify(data)
    }
  },
  methods: {
    jumpTo(e){
      uni.navigateTo({url:`/subPackage/version2/generatorContract/detail?wid=${e.wid}&deptname=${e.deptname}&unickname=${e.unickname}`})
    },
    getTrust(){
      getMyTrusteeshipcontractList({
        limit:100,
        offset:1,
        type:this.userInfo.usertype==2?'0':'1',
        userid:this.userInfo.userid,
      }).then(e=>{
        console.log(e)
        if(e.code===200){
          e.data.forEach(e=>{
            if(e.trusteeshipendtime){
              e.trusteeshipendtime = e.trusteeshipendtime.split(' ')[0]
            }
          })
          this.thirdList = e.data
        }
      })
    },
    gobanck(){
      uni.redirectTo({ url: '/pages/index/index' })
    },
    createQRCode(){
        let that = this
        let data = {
          page: "subPackage/link/tuoguan",
          scene:'00'
        }
        createQRCode(data).then(res=>{
          if(res.code == 200){
            that.shareImg = res.msg
          }
        })
    },
    cheangeDep(item){
      if(!item){
        return ''
      }
      if(item.indexOf('公寓') == -1){
        return item
      }else{
        return '***公寓'
      }
    },
    onRefresh(){
      this.getHouseYzModelList()
      this.triggered = 'restore'
      setTimeout(() => {
        this.triggered = false
      }, 1000)
    },
    _onLoadmore(){
      // this.getHouseYzModelList()
    },
    onClickItem(e){
      this.current = e.currentIndex
      this.checkall = false
      this.getHouseYzModelList()
    },
    clickhost(text){
      console.log('this.houseList.',this.houseList)
      console.log('...',text,this.isshow,this.current)
      
      if(text == '解除选中的托管' && this.isshow){
        this.canceltrusteeship()
      }else if(text == '解除选中的托管'){
        uni.showToast({
          title: '请选择房源！',
          icon: 'none'
        })
      }else if(text == '托管已选中房源'){
        let data = []
        this.houseList.forEach((el,idx) => {
          el.houseLists.forEach((elem,index) => {
            if(elem.checked){
              data.push({
                houseid:elem.houseid,
                houseroomid:elem.houseroomid,
                userid:this.userid,
              })
            }
          })
        })
        if(data.length <=0 ){
          uni.showToast({
            title: '请选择房源！',
            icon: 'none'
          })
          return
        }
        console.log(JSON.stringify(data))
        uni.navigateTo({
          url: '/subPackage/version2/generatorContract/index?data='+JSON.stringify(data)
        })

      }
      
    },
    canceltrusteeship(){
      let data = []
      this.houseList.forEach((el,idx) => {
        el.houseLists.forEach((elem,index) => {
          if(elem.checked){
            data.push({
              houseid:elem.houseid,
              houseroomid:elem.houseroomid
            })
          }
        })
      })
      let that = this
      canceltrusteeship(data).then(res=>{
        if(res.code == 200){
          uni.showToast({
            title: '操作成功',
            icon: 'none'
          })
          setTimeout(function(){
            that.getHouseYzModelList()
          },1500)
        }
      })
    },
    clickitem() {
      // res.isitem = this.check(res)
      // this.$jump({path: '/pages/manage/commponents/share/setLease'})
    },
    checkedAll(e){
      this.checkall = !this.checkall
      if(!this.houseList){
        return
      }
      this.houseList.forEach((el,idx) => {
        this.$set(el,'checked',true)
        el.houseLists.forEach((elem,index) => {
          this.$set(elem,'checked',true)
        })
      })
      for(let j = 0;j<=this.houseList.length;j++){
        let arr = this.houseList[j]
        for(let i = 0;i<=arr.houseLists.length;i++){
          if(arr.houseLists[i].checked){
            this.isshow = true
            break
          }else{
            this.isshow = false
          }
        }
      }
      this.$forceUpdate()
    },
    checkItemAll(index){
      this.houseList[index].checked = !this.houseList[index].checked
      this.houseList[index].houseLists.forEach((el,idx) => {
        this.$set(el,'checked',this.houseList[index].checked)
      })
      let arr = this.houseList
      
      this.checkall = this.forArrfn2(arr)
      this.$forceUpdate()
      for(let j = 0;j<=this.houseList.length;j++){
        let arr = this.houseList[j]
        if(!this.houseList[j]){
          break
        }
        for(let i = 0;i<=arr.houseLists.length;i++){
          if(arr.houseLists[i].checked){
            this.isshow = true
            break
          }else{
            this.isshow = false
          }
        }
      }
    },
    checkItme(idx,index){
      this.houseList[idx].houseLists[index].checked = !this.houseList[idx].houseLists[index].checked
      let arr = this.houseList[idx].houseLists
      this.houseList[idx].checked = this.forArrfn(arr)
      this.checkall = this.forArrfn2(this.houseList)
      this.$forceUpdate()
      // this.houseList.forEach((item1,index)=>{
      for(let j = 0;j<=this.houseList.length;j++){
        let aa = false
        let arr = this.houseList[j]
        for(let i = 0;i<=arr.houseLists.length;i++){
          if(arr.houseLists[i].checked){
            this.isshow = true
            aa = true
            break
          }else{
            this.isshow = false
          }
        }
        if(aa){
          return
        }
      }
      // })
    },
    clickBtn(item,id){
      switch (id) {
        case 1:
          this.housetypeList[item.id].ischeck = !this.housetypeList[item.id].ischeck
          const index = this.housetype.indexOf(item.id)
          if( index > -1 ){
            this.housetype.splice(index,1)
          }else{
            this.housetype.push(item.id)
          }
          this.getHouseYzModelList()
          break;
        case 2:
          this.outtypeList[item.id].ischeck = !this.outtypeList[item.id].ischeck
          const index2 = this.outtype.indexOf(item.id)
          if( index2 > -1 ){
            this.outtype.splice(index2,1)
          }else{
            this.outtype.push(item.id)
          }
          this.getHouseYzModelList()
          break;
        case 3:
          this.houseattributeList[item.id].ischeck = !this.houseattributeList[item.id].ischeck
          const index3 = this.houseattribute.indexOf(item.id)
          if( index3 > -1 ){
            this.houseattribute.splice(index3,1)
          }else{
            this.houseattribute.push(item.id)
          }
          this.getHouseYzModelList()
          break;
      }
    },
    searchInput(e){
      this.addresslike = e.detail.value
      if(!this.isflag) return
      this.isflag = false
      let that = this
      this.timer = setTimeout(function(){
        that.getHouseYzModelList()
        that.isflag = true
      },2000)
    },
    check(item){
      // item.biglocknumber // 大门门锁
      // item.outtype   //合租-0  整租-1
      // item.isbindlock  //房间门锁 门锁 0-未绑定，1-已绑定
      // return 0 表示大门没锁 灰色   1表示整租有门锁 2表示合租大门有锁，小门没锁
      if (item.biglocknumber) {
        if(item.outtype == 1){
          return 1
        }else{
          if(item.locknumber){
            return 1
          }else{
            return 2
          }
        }
      }else{
        return 0
      }
    },
    isImge(item){
      if(item.tag){
        if(item.biglocknumber){
          // 是否租约快到期 0-否，1-是 
          // if(item.isexpire == 1){
          //   return 1
          // }else{
          //   if(item.ispayrent == 1){
          //     // 是否接近交租 0-否，1-是 
          //     return 2
          //   }else{
          //     return false
          //   }
          // }
          let int = 0
          switch (item.tag) {
            // tag = 2 接近交租
            case 2:
              int = 2
              break;
            // tag = 3 租约快到期
            case 3:
              int = 1
              break;
          }
          return int
        }else{
          return false
        }
      }else{
        return false
      }
    },
    getHouseYzModelList(){
      const data = {
        addresslike: this.addresslike,  //模糊查询
        houseattribute: this.houseattribute,  // 出租方式 0-自持 1-托管
        housetype: this.housetype,  // 0-空 1-已租 2-欠租 3-接近交租 4-租约快到期 5-未绑定门锁
        outtype: this.outtype,   //出租方式 0-合租 1-整租
        userid: this.userid,
        type: this.current ? 2 : 1
      }
      getHouseYzModelList(data).then(res=>{
        if(res.code == 200){
          if(!res.data){
            this.houseList = []
            return
          }
           this.houseList = res.data
          for(let i=0,len=this.houseList.length;i<len;i++){
            this.houseList[i].checked = false
            this.houseList[i].houseLists.map((item,idx)=>{
              return item.checked = false
            })
          }
        }
      })
    },
    forArrfn(arr){
      let isall = false
      for(let i = 0,len = arr.length; i<len;i++){
        // if(that.isradio(arr[i])){
          if(!arr[i].checked){
            isall = false
            return false
          }else{
            isall = true
          }
        // }
      }
      return isall
    },
    forArrfn2(arr){
      let isall = false
      for(let i = 0,len = arr.length; i<len;i++){
        if(!arr[i].checked){
          isall = false
          return false
        }else{
          isall = true
        }
      }
      return isall
    },
    forArrfn3(){
      
      let isopenpopup = false
      for(let i=0,len = this.houseList.length;i<len;i++){
        let item = this.houseList[i]
        if(item.checked){
          isopenpopup =  false
          return isopenpopup
        }else{
          for(let j=0,len = item.houseLists.length;j<len;j++){
            let item11 = item.houseLists[j]
            if(item11.checked){
              isopenpopup =  false
              return
            }else{
              isopenpopup =  true
            }
          }
        }
      }
      return isopenpopup
    }
  }
}
</script>

<style lang="scss" scoped>
.tght{
  width: 345px;
  height: 210px;
  margin: 0 auto;
  background: #F3F4F8;
  border-radius: 4px;
  margin-top: 20px;
  .inner{
    width: 335px;
    margin: 0 auto;
    height: 167px;
    background: #FFFFFF;
    border-radius: 4px;
    display: flex;
    align-items: center;
    .left{
      width: 76px;
      text-align: center;
      img{
        width:36px;
        height: 36px;
      }
    }
    .right{
      font-size: 15px;
      .iner-c{
        display: flex;
      }
      .label{
          width: 80px;
      }
      .content{
        
      }
    }
  }
  .contract{
    font-size: 15px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #0191FF;
    line-height: 21px;
    margin-left:23px ;
    margin-top: 9px;
  }
}
.hosting{
  width: 100vw;
  box-sizing: border-box;
  height: 100vh;
  background: #F9F9F9;
  display: flex;
  flex-direction: column;
  .checkAll{
    margin-top: 1px;
    margin-bottom: 10px;
    padding: 0 15px;
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    .cccc{
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 400;
        color: #4A4A4A;
    }
    .shareAll{
      padding: 0 16px;
      height: 24px;
      background: linear-gradient(315deg, #FFAA58 0%, #FFBD6C 100%);
      border-radius: 13px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 24px;
    }
    .shareAll::after{
      border: 0;
    }
  }
  .hunk{
    
    width: 100vw;
    box-sizing: border-box;
    background: #F9F9F9;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    .search{
      height: 50px;
      background: #FFFFFF;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      img{
        width: 14px;
        height: 14px;
        position: absolute;
        top: 18px;
        left: 29px;
      }
      input{
        width: 345px;
        height: 30px;
        background: #F3F2F6;
        border-radius: 20px;
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000;
        line-height: 30px;
        padding-left: 37px;
      }
      input::placeholder{
        color: #9B9B9B;
      }
    }
    .type-list{
    box-sizing: border-box;
    margin-top: 1px;
    background: #FFFFFF;
    width: 100%;
    padding: 10px 6px 0 15px;
    .newItem{
      display: flex;
      justify-content: space-between;
    }
    .type-item{
      width: 100%;
      .item-lable{
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #4a4a4a;
        margin: 0 0 10px 0;
      }
      .item{
        span{
          position: relative;
          display: inline-block;
          box-sizing: border-box;
          width: 80px;
          height: 26px;
          font-size: 14px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          line-height: 26px;
          text-align: center;
          margin: 0 8px 13px 0;
          img{
            width: 14px;
            height: 14px;
            position: absolute;
            top: 0;
            right: 0;
          }
        }
        span:nth-child(4){
          margin-right: 0;
        }
      }
    }
    .newItem .type-item .item span:nth-child(2){
      margin-right: 0;
    }
    .red{
      background: rgba(254, 65, 55, 0.2);
      border-radius: 4px;
      border: 1px solid #FE4137;
      color: #EF1E13;
    }
    .kong{
      background: rgba(18, 203, 110, 0.2);
      border-radius: 4px;
      border: 1px solid #00CF64;
      color: #00CF64;
    }
    .yizu{
      background: rgba(98, 136, 234, 0.2);
      border-radius: 4px;
      border: 1px solid #6288EA;
      color: #6288EA;
    }
    .jjjz{
      background: rgba(255, 218, 45, 0.2);
      border-radius: 4px;
      border: 1px solid #FFD62D;
      color: #FFE12D;
    }
    .zykjs{
      background: rgba(255, 199, 45, 0.2);
      border-radius: 4px;
      border: 1px solid #FFC72D;
      color: #FFC72D;
    }
    .wbdms{
      background: rgba(130, 130, 130, 0.2);
      border-radius: 4px;
      border: 1px solid #828282;
      color: #828282;
      font-weight: 400;
    }
    .zc{
      background: rgba(252, 145, 58, 0.2);
      border-radius: 4px;
      border: 1px solid #FC913A;
      color: #FC913A;
      font-weight: 400;
    }
  }
    .home-list{
      flex: 1;
      overflow-y: auto;
      .home-item{
        background-color: #fff;
        padding: 20px 15px;
        margin: 10px 0;
        .toppp{
          display: flex;
          justify-content: space-between;
          align-items: center;
          .cccc{
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 400;
            color: #000000;
            line-height: 18px;
            padding-bottom: 8px;
          }
        }
      }
      .home-name{
        width: 285px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 16px;
        padding-bottom: 10px;
      }
      .item-list{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .one{
          width: 108px;
          background: rgba(18, 203, 110, 0.2);
          border-radius: 4px;
          padding-bottom: 16px;
          margin: 10px 10px 0 0;
          position: relative;
          .cc{
            position: absolute;
            top: 0;
            right: 0;
          }
          .top{
            width: 60px;
            height: 18px;
            // background: #FC913A;
            // border-radius: 4px 0px 12px 0px;
            // font-size: 10px;
            // font-family: PingFangSC-Regular, PingFang SC;
            // font-weight: 400;
            // color: #FFFFFF;
            // line-height: 18px;
            // text-align: center;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .miaoshu{
            width: 89px;
            // height: 34px;
            font-size: 12px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #4A4A4A;
            line-height: 17px;
            margin: 2px 10px;
            word-break:break-all;
            display:-webkit-box;
            -webkit-line-clamp:3;
            -webkit-box-orient:vertical;
            overflow:hidden;
          }
          .yuezu{
            margin-left: 10px;
            color: #4A4A4A;
            height: 17px;
            font-size: 10px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 200;
            line-height: 17px;
            span{
              font-size: 12px;
              font-weight: 600;
              color: #FF5A65;
            }
          }
          .tuoguanduixiang{
            // display: flex;
            height: 14px;
            font-size: 10px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #4A4A4A;
            line-height: 17px;
            margin: 3px 0 0 10px;
            .tgdx{
              width: 80px;
            }
            .name{
              margin-left: 3px;
              overflow: hidden;
            }
          }
          .type1{
            width: 36px;
            height: 24px;
          }
          .type2{
            width: 39px;
            height: 31px;
          }
          .type3{
            width: 44px;
            height: 35px;
          }
          .type{
            position: absolute;
            right: 4px;
            bottom: 4px;
            img{
              width: 100%;
              height: 100%;
            }
          }
        }
        .wbdm{
          background: rgba(130, 130, 130, 0.2);
        }
        .zc{
          background: rgba(18, 203, 110, 0.2);
        }
        .tg{
          background: rgba(98, 136, 234, 0.2);
        }
        .one:nth-child(3n + 3){
          margin-right: 0;
        }
      }
      .none{
        width: 100vw;
        height: 100%;
        // background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        img{
          width: 190px;
          height: 195px;
        }
      }
    }
  }
}
::v-deep .segmented-control{
  height: 45px;
  background: #FFFFFF;
  .segmented-control__text{
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFAA58;
    line-height: 45px;
  }
  .segmented-control__item--text{
    border-bottom-width: 3px;
  }
  .segmented-control__item:first-child::after{
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 2px;
    height: 20px;
    background-color: #EFEFEF;
    // border: 1px solid ;
  }
}
::v-deep radio .wx-radio-input{
  width: 16px;
  height: 16px;
  background-color: transparent;
}
</style>
